
import React, { Component } from 'react';
import { connect } from 'dva';
import { Button, Form, Input, Card }  from 'antd';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import TableList from '@/components/TableList';
import TableListForm from '@/components/TableListForm';
import GoodsModal from './goodsModal';

@connect(({ goods }) => ({
    goods
}))
class Goods extends Component {

    handleCreate = () => {
        const { dispatch } = this.props;
        dispatch({
            type: 'goods/showModal',
            payload: {
                modalType: 'create'
            }
        })
    }

    handleQuery = values => {
        console.log(values);
    }

    createData = (postData) => {
        // 创建 数据请求
        console.log(postData)
        const { dispatch } = this.props;
        dispatch({
            type: 'goods/addRole',
            payload: {
                ...postData
            }
        })
    }

    onPageChange = (page, pageSize) => {
        const { dispatch } = this.props;
        dispatch({
            type: 'goods/fetch',
            payload: {
                page: page,
                pageSize: pageSize
            }
        })
    }

    onShowSizeChange = (page, size) => {
        const { dispatch } = this.props;
        dispatch({
            type: 'goods/fetch',
            payload: {
                page: page,
                pageSize: size
            }
        })
    }

    render() {
        const { goods, dispatch } = this.props;
        const { modalVisible, modalType, modalInitValues, query, listData, total } = goods;

        const modalProps = {
            initialValues: modalInitValues,
            modalType: modalType,
            title: `${modalType === 'create' ? '新增商品' : '更新商品'}`,
            okText: `${modalType === 'create' ? '新增' : '更新'}`,
            createData: this.createData,
            visible: modalVisible,
            onCancel() {
                dispatch({
                  type: `goods/hideModal`,
                })
            },
        }

        const columns = [
            {
                title: '商品名称',
                dataIndex: 'name',
                key: 'name'
            },
            {
                title: '描述',
                dataIndex: 'desc',
                key: 'desc'
            },
            {
                title: '创建时间',
                dataIndex: 'created_at',
                key: 'created_at'
            }
        ]

        return (
            <PageHeaderWrapper 
                title="商品"
            >
                <TableListForm onFinish={this.handleQuery} initialValues={{...query}}>
                    <Form.Item label="商品名称" name="name">
                        <Input />
                    </Form.Item>
                    <Form.Item><Button type="primary" onClick={this.handleCreate}>新增</Button></Form.Item>
                    <Form.Item><Button type="primary" htmlType="submit">查询</Button></Form.Item>
                </TableListForm>
                <Card>
                    <TableList 
                        dataSource={listData} 
                        columns={columns} 
                        total={total}
                        onPageChange={this.onPageChange}
                        onShowSizeChange={this.onShowSizeChange}
                    />
                </Card>
                <GoodsModal {...modalProps}></GoodsModal>
            </PageHeaderWrapper>
        )
    }
}

export default Goods;